<template>
	<view class="shadow">
		<view class="u-flex u-padding-left-30 u-flex-center u-padding-right-30 u-padding-top-20">
			<view class="u-padding-top-10">
				<u-image  v-if="coupon.redpack_type==1" src="@/static/icon/quan-coupon.png" width="64" height="52" ></u-image>
				<u-image v-else  src="@/static/icon/quan-duihuan.png" width="64"  height="52"></u-image>
			</view>
			<view class="u-flex-grow u-margin-left-20">
				<view  class="u-margin-bottom-10 color-1">
					<text class="font-size14 font-weight"> {{coupon.title}}</text>
				</view>
				<view class="u-line-1">
					<text class="font-size12 color-gray"> {{coupon.subtitle}}</text>
				</view>
				<view class="">
					<text class="font-size12 color-gray"> {{coupon.type_label}} </text>
					<text class="u-margin-left-20 font-size12 color-gray">{{coupon.tag}}</text>
					 
				</view>

			</view>
		</view>
		<view class="divider">
			<view class="border"> </view>
		</view>
		<view class="u-padding-left-30  u-padding-right-30 u-padding-bottom-20">
			<view class="u-flex align-center color-gray u-flex-between">
				<view class="font-size12">	
					 <view class="u-flex " @tap="triggle">
						
						<text class="">使用说明</text>
						<u-icon name="arrow-down" size="12"></u-icon>
					 </view>					
				</view>
				<view class="">
					<view v-if="coupon.can_get==1" class="">
						<u-button text="可领取" @click="onAgentCoupon" type="warning" size="small" shape="circle" :plain="true"></u-button>
						
					</view>
					<view v-else class="">
						<u-button text="已领取" type="success" size="small" shape="circle" :plain="true"></u-button>
						
					</view>
					
				</view>
			</view>
		</view>
		<view v-show="showInfo" class="u-content u-padding-25 font-size12 color-gray">
			<up-parse :tag-style="{ p: 'padding-bottom:30rpx; ' }" :content="coupon.describe"></up-parse>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import { couponList ,agentCoupon} from '@/common/api.js';
	
	const props = defineProps(['coupon']);
	const showInfo = ref(false);
	
	function triggle(){
		showInfo.value = !showInfo.value;
	}
	function onAgentCoupon()
	{
		agentCoupon({redpack_no: props.coupon.redpack_no}).then((ret) => {
			 props.coupon.can_get = 0;
		})
	}
</script>

<style lang="scss">
	.color-1{
		color: #FA642F;
	}
	.color-2{
		color: #24AF41;
	}
</style>